<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="火焰监测" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindA :data="dataA.yes" :title="'正常'" />
                <RemindA :data="dataA.no" :title="'异常'" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="今日报警级别统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindRightB v-for="item in dataB" :data="item.number" :title="item.title"/>
            </div>
        </div>
        <div class="div2">
            <TitleView title="过程事件报警统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindRightC :data="dataC"/>
            </div>
        </div>
    </div>
</template>

<script>
import RemindA from './components/RemindA.vue';
import RemindRightC from './components/RemindRightC.vue';
import RemindRightB from './components/RemindRightB.vue';
import { warn_right } from '@/request/api';
export default {
    components: {
        RemindA,
        RemindRightC,
        RemindRightB
    },
    data(){
        return{
            dataA:{"yes":"0","no":"0"},
            dataB:[],
            dataC:[]
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            warn_right().then((res) => {
                console.log("res:", res);
                this.dataA=res.data.data1
                this.dataB=res.data.data2
                this.dataC=res.data.data3
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.div1{
    height: 257px;
    .div1_d {
        margin-top: 20px;
    }
}
.div2{
    height: 303px;
    .div1_d {
        margin-top: 20px;
    }
}
.div3{
    .div1_d{

    }
}
</style>